/**
 * 主页控制器
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Platform,   // 判断当前运行的系统
    Navigator,
    Dimensions,
    TabBarIOS,
    InteractionManager,
    NetInfo,
    TouchableOpacity
} from 'react-native';


/**-----导入外部的组件类------**/
import Home from '../Home/Home'
import Find from '../Find/Find'
import Mine from '../Mine/Mine'
import Out from '../Out/Out'
import Statisical from '../Statisical/statisical'
import TabNavigator from 'react-native-tab-navigator';

var Swiper = require('react-native-swiper')//轮播组件

var Width = Dimensions.get('window').width; //屏宽
var Height = Dimensions.get('window').height; //屏宽
export default class Main extends Component {

    // 初始化函数(变量是可以改变的,充当状态机的角色)
    constructor(props) {
        super(props);
            this.state = ({
                selectedTab: 'Home' // 默认是第一个
            })
    }
    render() {
        return (
            <View style={styles.and}>
                <TabNavigator>
                    {/*--主页--*/}
                    <TabNavigator.Item
                        title="主页"
                        selected={this.state.selectedTab === 'Home'}
                        selectedTitleStyle={styles.selectedTitleStyle}
                        renderIcon={() => <Image source={{ uri: 'icon_home_nor' }} style={styles.iconStyle} />} // 图标
                        renderSelectedIcon={() => <Image source={{ uri: 'icon_home_pre' }} style={styles.iconStyle} />}   // 选中的图标
                        titleStyle={styles.textStyle}
                        onPress={() => this.setState({ selectedTab: 'Home' })}>
                        <Home {...this.props}/>
                    </TabNavigator.Item>
                    {/*--发现--*/}
                    <TabNavigator.Item
                        title="发现"
                        selected={this.state.selectedTab === 'Find'}
                        selectedTitleStyle={styles.selectedTitleStyle}
                        renderIcon={() => <Image source={{ uri: 'icon_message_nor' }} style={styles.iconStyle} />} // 图标
                        renderSelectedIcon={() => <Image source={{ uri: 'icon_message_pre' }} style={styles.iconStyle} />}   // 选中的图标
                        titleStyle={styles.textStyle}
                        onPress={() => this.setState({ selectedTab: 'Find' })}>
                        <Find {...this.props} />
                    </TabNavigator.Item>                   
                    {/*--音乐--*/}
                    <TabNavigator.Item
                        title="音乐"
                        selected={this.state.selectedTab === 'Out'}
                        selectedTitleStyle={styles.selectedTitleStyle}
                        renderIcon={() => <Image source={{ uri: 'icon_find_ok' }} style={styles.iconStyle1} />} // 图标
                        renderSelectedIcon={() => <Image source={{ uri: 'money_bule' }} style={styles.iconStyle1} />}   // 选中的图标
                        titleStyle={styles.textStyle}
                        onPress={() => this.setState({ selectedTab: 'Out' })}>
                        <Out {...this.props} />
                    </TabNavigator.Item>
                    {/*--统计--*/}
                    <TabNavigator.Item
                        title="统计"
                        selected={this.state.selectedTab === 'Statisical'}
                        selectedTitleStyle={styles.selectedTitleStyle}
                        renderIcon={() => <Image source={{ uri: 'icon_find_nor' }} style={styles.iconStyle} />} // 图标
                        renderSelectedIcon={() => <Image source={{ uri: 'icon_find_pre' }} style={styles.iconStyle} />}   // 选中的图标
                        titleStyle={styles.textStyle}
                        onPress={() => this.setState({ selectedTab: 'Statisical' })}>
                        <Statisical {...this.props} />
                    </TabNavigator.Item>
                    {/*--我的--*/}
                    <TabNavigator.Item
                        title="我的"
                        selected={this.state.selectedTab === 'Mine'}
                        selectedTitleStyle={styles.selectedTitleStyle}
                        renderIcon={() => <Image source={{ uri: 'icon_user_collect' }} style={styles.iconStyle} />} // 图标
                        renderSelectedIcon={() => <Image source={{ uri: 'icon_fav_empty' }} style={styles.iconStyle} />}   // 选中的图标
                        titleStyle={styles.textStyle}
                        onPress={() => this.setState({ selectedTab: 'Mine' })}>
                        <Mine {...this.props} />
                    </TabNavigator.Item>

                </TabNavigator>           
            </View>
        );
    }
   
};


const styles = StyleSheet.create({
    iconStyle: {
        width: 25,
        height: 21,
        marginBottom:-3
    },
    iconStyle1: {
        width: 28,
        height: 28,
        bottom: 1
    },

    selectedTitleStyle: {
        color: '#436EEE'
    },
    container: {
        backgroundColor: '#f85959',
        height: 40
    },
    logo: {

        position: 'absolute',
        marginLeft: Width / 2 - 20,
        bottom:25

    },
    and: {
        height: Platform.OS === 'ios' ? Height : Height-20 ,
    }, logo1: {
        width: 40,
        height: 40,
        borderRadius: 20
    }, textStyle: {
        fontSize: 11,
        marginBottom:6
    }
});

// 输出组件类
module.exports = Main;
